<?php
/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */

require_once(dirname(__FILE__) . "/../../dbcom/StaisCom.php");
require_once(dirname(__FILE__) . "/../../dbcom/ServiceinfoCom.php");

$staiscom = new StaisCom();
$serviceinfocom = new ServiceinfoCom();

$healthnum = $serviceinfocom->getNumService("3.4");
$mechnum = $serviceinfocom->getNumService("5");

$allnum = $serviceinfocom->getAllNum();

$num0 = $healthnum;
$num1 = $allnum - $healthnum;

$num2 = $mechnum;
$num3 = $allnum - $mechnum;

?>

<!DOCTYPE html>
<html>

    <head>

        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="keywords" content="">
        <meta name="description" content="">
        <link href="../public/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
        <link href="../public/css/font-awesome.css?v=4.4.0" rel="stylesheet">

        <link href="../public/css/animate.css" rel="stylesheet">
        <link href="../public/css/style.css?v=4.1.0" rel="stylesheet">

        <link href="../public/css/paging.css" rel="stylesheet">
        <link href="../public/css/showproject.css" rel="stylesheet">
    </head>

    <body class="gray-bg">

        <div class="wrapper wrapper-content animated fadeInUp">
            <div class="row">
                <div class="col-sm-12">

                    <div class="ibox">
                        <div class="ibox-title">
                            <h5>服务统计</h5>
                            <div class="ibox-tools">

                            </div>
                        </div>
                        <div class="ibox-content">
                            <div class="row m-b-sm m-t-sm">
                                <div class="col-md-1">

                                </div>
                                <div class="col-md-11">
                                    <div class="input-group">

                                    </div>
                                </div>
                            </div>

                            <div class="project-list">
                                <!--                                内容-->
                                <div style="height:800px">
                                <div id="main" style="width: 500px;height:600px;float:left;"></div>
                                <div id="main1" style="width: 500px;height:600px;float:left;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>




        <!-- 全局js -->
        <script src="../public/js/jquery.min.js?v=2.1.4"></script>
        <script src="../public/js/bootstrap.min.js?v=3.3.6"></script>
        <script src="../public/js/plugins/layer/layer.min.js"></script>
        <script src="../public/js/echarts.js"></script>

        <!-- 自定义js -->
        <script src="../public/js/paging.js?v=1.0.0"></script>
        <script src="../public/js/upload.js?v=1.0.0"></script>
        <script src="../public/js/common.js?v=1.0.0"></script>

        <script>
            $(document).ready(function () {

                $('#loading-example-btn').click(function () {
                    btn = $(this);
                    simpleLoad(btn, true)

                    // Ajax example
                    //                $.ajax().always(function () {
                    //                    simpleLoad($(this), false)
                    //                });

                    simpleLoad(btn, false)
                });
            });
            function simpleLoad(btn, state) {
                if (state) {
                    btn.children().addClass('fa-spin');
                    btn.contents().last().replaceWith(" Loading");
                } else {
                    setTimeout(function () {
                        btn.children().removeClass('fa-spin');
                        btn.contents().last().replaceWith(" Refresh");
                    }, 2000);
                }
            }
            var myChart = echarts.init(document.getElementById("main"));
            option = {
                title: {
                    text: '康复项目使用率',
                    subtext: '',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    // orient: 'vertical',
                    // top: 'middle',
                    bottom: 10,
                    left: 'center',
                    data: ['康复项目', '其他项目']
                },
                series: [
                    {
                        name: '使用率统计',
                        type: 'pie',
                        radius: '65%',
                        center: ['50%', '50%'],
                        selectedMode: 'single',
                        data: [
                            {value: <?=$num0 ?>, name: '康复项目'},
                            {value: <?=$num1 ?>, name: '其他项目'}
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option);
            var myChart1 = echarts.init(document.getElementById("main1"));
            option1 = {
                title: {
                    text: '帮扶机器人使用率',
                    subtext: '',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    // orient: 'vertical',
                    // top: 'middle',
                    bottom: 10,
                    left: 'center',
                    data: ['帮扶机器人', '其他项目']
                },
                series: [
                    {
                        name: '使用率统计',
                        type: 'pie',
                        radius: '65%',
                        center: ['50%', '50%'],
                        selectedMode: 'single',
                        data: [
                            {value: <?=$num2 ?>, name: '帮扶机器人'},
                            {value: <?=$num3 ?>, name: '其他项目'}
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            myChart1.setOption(option1);
        </script>

    </body>
</html>